<template>
<div :class="[$style.container]">
  <div :class="[$style.header]">
    <el-link :underline="false" @click="$router.push('/')"> <i class="el-icon-back"></i> 返回</el-link>
    <el-link :underline="false" type="danger" @click="onClear"><i class="el-icon-brush"></i><span>清空记录</span></el-link>
  </div>
  <div :class="[$style.body]">
    <el-table :data="$downloader.queue" stripe size="small" style="width: 100%">
      <el-table-column prop="name" label="文件名">
        <template #default="{row}">
          <span :class="[$style.docIcon]"><doc-icon :data="row"></doc-icon></span>
          <span :class="$style.link" @click="onDetail(row)" v-if="row.type === 'dir'">{{row.name}}</span>
          <span v-else>{{row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="size" label="大小" width="160px">
        <template #default="{ row }">
          <span v-if="row.status === 'success'">{{row.size | size}}</span>
          <span v-else>{{row.doneSize | size}}</span>
          /<span>{{row.size | size}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" :width="220">
        <template #default="{row}">
          <span v-if="row.status === 'pending'">
            <span class="mr-1"><i class="el-icon-time"></i></span>
            <span>{{statusText(row.status)}}</span>
          </span>
          <span v-else-if="row.status === 'success'">
            <span class="text-success mr-1"><i class="el-icon-circle-check"></i></span>
            <span>{{statusText(row.status)}}</span>
          </span>
          <span v-else>
            <div>
              <el-progress :percentage="100 * row.doneSize / (row.size || 1)" :stroke-width="4" :show-text="false"
                :status="row.status === 'fail' ? 'exception' : undefined"></el-progress>
            </div>
            <div>
              <span v-if="row.status === 'downloading'">
                <span>{{row.speed | size}}/s</span>
                -
                <span>剩余时间: {{leftTime(row)}}</span>
              </span>
              <span v-else>{{statusText(row.status)}}</span>
            </div>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="action" label="操作" width="180" fixed="right">
        <template #default="{row}">
          <div style="font-size: 14px;">
            <el-tooltip content="开始" class="ml-2" :open-delay="750" v-if="row.status === 'pause'">
              <span :class="[$style.icon]" @click="onResume(row)"><i class="el-icon-video-play"></i></span>
            </el-tooltip>
            <el-tooltip content="暂停" class="ml-2" :open-delay="750" v-if="row.status === 'downloading'">
              <span :class="[$style.icon]" @click="onPause(row)"><i class="el-icon-video-pause"></i></span>
            </el-tooltip>
             <el-tooltip content="重试" class="ml-2" :open-delay="750" v-if="row.status === 'fail'">
              <span :class="[$style.icon]" @click="onRetry(row)"><i class="el-icon-refresh"></i></span>
            </el-tooltip>
            <el-tooltip content="删除" class="ml-2" :open-delay="750">
              <span :class="[$style.icon]" @click="onRemove(row)"><i class="el-icon-delete"></i></span>
            </el-tooltip>
            <el-tooltip content="打开所在目录" class="ml-2" :open-delay="750">
              <span :class="[$style.icon]" @click="onOpen(row)"><i class="el-icon-search"></i></span>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</div>
</template>

<script lang="ts">

import { remote } from 'electron'
import { Vue, Component, Provide, Watch, Ref } from 'vue-property-decorator'

const statusMap: any = {
  pending: '等待中',
  downloading: '下载中',
  success: '已完成',
  fail: '下载失败',
  pause: '已暂停'
}

@Component
export default class DoanloadPage extends Vue {
  $style!: any

  statusText (status: string) {
    return statusMap[status] || status
  }

  leftTime (row: any) {
    const { size = 0, doneSize = 0, speed } = row
    if (!speed) return '-'
    const duration = Math.max((size - doneSize) / speed, 0)
    const s = Math.floor(duration % 60)
    const m = Math.floor((duration / 60) % 60)
    const h = Math.floor(duration / 3600)
    const f = (t: any) => ('0' + t).slice(-Math.max(2, String(t).length))
    return f(h) + ':' + f(m) + ':' + f(s)
  }

  onResume (row: any) {
    this.$downloader.resume(row?.id)
  }

  onPause (row: any) {
    this.$downloader.pause(row?.id)
  }

  onRetry (row: any) {
    this.$downloader.retry(row?.id)
  }

  onRemove (row: any) {
    this.$confirm('确认要删除该下载项?', '确认').then(() => {
      this.$downloader.remove(row?.id)
    }).catch(() => {
      // ignore
    })
  }

  onOpen (row: any) {
    const { shell } = remote
    shell.openPath(row.localPath)
  }

  onClear () {
    this.$confirm('确认要清空所有下载项?', '确认').then(() => {
      this.$downloader.removeAll()
    }).catch(() => {
      // ignore
    })
  }

  onDetail (row: any) {
    this.$router.push(`/download/${row.id}/detail`)
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

$header-height: 40px;

.container {
  height: 100%;
  background-color: #fff;
}

.header {
  height: 48px;
  padding: 0 12px;
  border-bottom: 1px solid $border-split-color;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: space-between;
}

.body {
  box-sizing: border-box;
  padding: 12px;
  height: calc(100% - 48px - 40px);
  overflow: auto;
}

.icon {
  &:hover {
    cursor: pointer;
    opacity: .8;
  }
}

.docIcon {
  font-size: 18px;
  margin-right: 12px;
  color: $color-primary;
}

.link {
  &:hover {
    color: $color-primary;
    cursor: pointer;
  }
}
</style>
